/*
 *  STUDIO CONTACT
 *  Studio info in the footer
 *
 */

.studio {
  position: relative;
  list-style: none;

  &.malmo {
    .postal-code {
      float: left;
      margin-right: 7px;
    }
  }

  .clock {
    position: absolute;
    right: 20px;
    top: 0;
  }

  .studio-title {
    margin: 0;
    margin-top: 20px;
    padding: 20px 0;
    font-size: 24px;
    font-family: $PxGroteskRegular;
    text-transform: capitalize;
    cursor: pointer;

    &::after {
      content: '+';
      position: relative;
      top: auto;
      right: auto;
      display: inline-block;
      font-size: 25px;
      color: $offWhite;
      margin-left: 10px;
    }
  }

  .contact-underline-style {
    height: 2px;
    width: 100%;
  }

  .studio-details {
    overflow: hidden;
    height: 0;
    padding: 0;
    transition: height 0.3s ease-in-out;
    @extend .small-body-copy;
    line-height: 20px;

    @media screen and (min-width: $bp-medium) {
      line-height: 22px;
    }

    .vcard {
      padding: 0;

      .adr {
        p {
          margin: 0;
        }
        abbr {
          border-bottom: 0;
        }
      }

      .map {
        display: inline-block;
        margin-top: 20px;
        transition: border-color $hover-duration-quick ease-in-out;

        &:hover {
          border-color: $offWhite !important;
        }
      }
    }
  }

  @media screen and (max-width: $bp-medium - 1px) {
    &.open {
      background-color: transparent !important;

      .studio-title::after {
        content: '\2013';
      }
      .studio-details {
        height: 160px;
      }
    }
  }

  @media screen and (min-width: $bp-medium) {
    height: 230px;
    vertical-align: top;
    transition-duration: 0s;
    margin-bottom: 50px;

    .studio-title {
      padding: 0 0 15px;
      cursor: auto;
      font-family: $PxGroteskRegular;
      font-size: 12px;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-size: 16px;

      &::after {
        display: none;
      }
    }
    .studio-details {
      height: auto;
      padding: 0;

      .vcard {
        padding: 0;
      }
    }
  }

  @media screen and (min-width: $bp-large) {
    height: auto;
    margin-bottom: 9;

    .clock {
      position: relative;
      right: auto;
      top: auto;
    }
  }

}
